<template>
  <div class="container" :class="container_to" ref="wrapper">

      <!--<mapShow class="mapShow" :class="top_mapShow" v-if="mapShowFlag"></mapShow>-->
    <!-- <mapShow class="mapShow"  @setMapNoSee="setMapNoSee" :selectOneAddress="selectAddress" v-if="mapShowFlag"></mapShow> -->

    <div class="all_msg" ref="all_msg">
    <img src="http://file.rzkeji.com/web/recruit/icon/swiper1.png" class="tip"/>
    <!-- <div class="search">
      <input placeholder="请输入职位名/公司关键字" @click="goSearch"/>
      <img src="http://file.rzkeji.com/web/recruit/icon/search.png"/>
    </div> -->
    <menu1 class="munu1" :showEdustate="true"></menu1>

    <div class="refresh">
      <div class="refresh_btn" @click="refreshResumeList">刷新简历</div>
    </div>
    <div class="release_all">
      <!-- 显示发布 -->
      <div class="release_show" v-for="(item, index) in resumeList" :key="index" @click="toresumeDetail(item.id)">
        <!-- 头像 -->
        <div class="release_left">
          <img v-if="item.user_info" class="header" :src="item.user_info.photo_url" />
        </div>

        <!-- 右侧 -->
        <div class="release_right">
          <!-- 右侧上方，名字，时间，联系他 -->
          <div class="release_right_top">
            <div class="release_right_top_left">
              <span v-if="item.user_info" class="release_name">{{ item.user_info.nickname }}</span>
              <span v-else class="release_name">该用户无昵称</span>
              <span class="release_time">{{ item.created_at }}</span>
            </div>

            <a  class="release_contact" @click.stop="call(item.phone)" v-if="item.phone">联系Ta</a>
          </div>

          <!-- 右侧下方，发布信息，地址 -->
          <div class="release_right_bottom">
            <div v-if="item.desc" class="release_content">{{ item.desc }}</div>
            <div v-else class="release_content">Ta没有留消息</div>
            <div class="release_right_bottom_twef">
              <img class="release_address_img" src="http://file.rzkeji.com/web/recruit/icon/address.png"/>
              <!--<span v-if="item.province" class="release_address">{{ item.province + item.city + item.area   }}</span>-->
              <!-- <span v-if="item.address_detail" class="release_address" @click.stop="setMapToSee(item.province+item.city+item.area)">{{item.province}}{{item.city}}{{item.area}}{{item.address_detail}}</span> -->
             <span v-if="item.address_detail" class="release_address" >{{item.province}}{{item.city}}{{item.area}}{{item.address_detail}}</span>
              <span v-else class="release_address" >Ta没有留地址</span>
            </div>
          </div>

        </div>
      </div>
      </div>

      <!--<div class="wrapper" >-->
        <!--<resumeList :resume="resumeList" ></resumeList>-->
      <!--</div>-->
    <footerNav :select1="2"></footerNav>
    </div>
  </div>
</template>

<script>
import { Toast } from 'vant';
import menu1 from '@/components/menu1'
import resumeList from "@/components/resumeList"
import mapShow from '@/components/mapShow'
import {mapState} from 'vuex'
import BScroll from 'better-scroll'
import footerNav from '@/components/footerNav'


export default {
  name:'searchResume',
  data () {
    return {
      resumeList:[],//简历列
      type:'work',
      workType:'',
      position_type:'',
      salary_range:'',
      salary_type:'',
      page:0,
      scroll:'',
      moreList:'',//保存唯一的方法，用于移除

      mapShowFlag: false, // 设置地图是否显示
      top_mapShow: "",    // 地图过渡样式
      container_to: "",   //  类container的动画
      selectAddress: "",  //  选择地址传递给地图

//      工时判断,筛选
      position_type: "",
      select_addresss:{
        province: "",
        city: "",
        area: "",
      }
    }
  },
   computed:{
    //  ...mapState(['classify']),
      ...mapState({
        classify: state => state.modulesWork.classify,
        address: state => state.modulesWork.address,
        salary: state => state.modulesWork.salary,
        education:state=>state.modulesWork.educate
  }),
   },
  watch:{//监听vuex的变化，进行worklist的更新

    //    分类的滑动选择获取
    classify(data){
      var industry_id = data.industry_id;

      if(industry_id == 1)
        this.position_type = "short";
      if(industry_id == 2)
        this.position_type = "long";

      this.page=0;
      this.resumeList = [];
      this.getResumeList(this.position_type, this.select_addresss);


    },

//    地址的滑动选择获取
    address(data){
      this.select_addresss = { area: data.area, city: data.city, province: data.province };
      this.page=0
      this.resumeList = [];
      this.getResumeList(this.position_type, this.select_addresss);
    },




  },
  components: {
    menu1,
    resumeList,
    footerNav,
      mapShow
  },
  methods: {
    call(number){

      window.location.href=`tel://${number}`
    },
    goSearch(){
      console.log(this.top_mapShow)
      this.$router.push({name:'search',query:{'type':'resume'}})
    },
    async getResumeList(position_type, select_addresss)
    {

      var position_type = this.position_type;
      var select_addresss = this.select_addresss;

      Toast.loading({
        mask: false,
        message: '加载中...'
      });


      let res=await this.$axios('/resume/getAllResume',{ params:{
        position_type: position_type,
        province: select_addresss.province,
        city:select_addresss.city,
        area:select_addresss.area,
        page: this.page,
        // user_token:userToken,
//        education,
//        page
        }});
        if(res.data.level=='success'){
          const res1=res.data.data

          console.log(res1);
         res1.forEach((val,index,arr)=>
         {
           this.resumeList.push({
             user_info: val.user_info,
             created_at: val.created_at || "",
              desc: val.desc || "",
             phone:	val.phone || "",
             province :val.province || "",
             city :val.city || "",
             area:val.area || "",
             position_type: val.position_type || "",
             education:val.education || "",
              address_detail: val.address_detail || "",
              id: val.id,

            });


        });
          console.log(this.resumeList);

        }
       Toast.clear()


    },

//    点击某简历跳转
    toresumeDetail(id){
      this.$router.push({name:'myRelease',query:{id}})
    },

    debounce(fun,delay=200){
      let timer=null;
      return function(...args){
        timer && clearTimeout(timer);
        timer=setTimeout(()=>{
          fun.apply(this,args);
        },delay)
      }
    },
    getMore(){

       var _this=this
              let top = document.documentElement.scrollTop
                      || document.body.scrollTop
                      || window.pageYOffset//要做兼容 在模拟器能正常获取scrolltop在微信h5页面和手机的浏览器页面一直为0
              const totalHeight=_this.$refs.wrapper.clientHeight

              if(totalHeight-top<800)
              {
                _this.page++
                _this.getResumeList(this.position_type, this.select_addresss);
                console.log('加载更多')
              }
          },
    getTop(){
      //debounce用了闭包的原理 return了一个匿名函数，
      //若直接 window.addEventListener('scroll',
        // this.moreList
        // this.debounce(_this.getMore)
      // )，remove不了，因为返回了一个匿名的函数
     var _this=this
      this.moreList= this.debounce(
           this.getMore
          )
       window.addEventListener('scroll',
        this.moreList
        // this.debounce(_this.getMore)
      )
    },
    refreshResumeList(){
      this.getResumeList(this.position_type, this.select_addresss);
    }
  },


  mounted(){

    this.getResumeList(this.position_type, this.select_addresss);
   this.getTop();
  },

  deactivated() {
    window.removeEventListener('scroll',this.moreList)
  },
}
</script>

<style scoped>
.tip{width: 100%;height: 170px;}
.search{width: 350px; position: relative;margin-left: 7.25px;margin-top: 15px;}
.search input{width: 330px;height:30px;line-height: 30px;position: absolute;left: 0;top: 6.25px;background-color: #fff;border-radius: 10px;padding-left:20px;background-color: #f1f1f1;}
.search img{width: 20px;height: 20px;position: absolute;right: 10px;top: 10.25px;}


.container
{
  width: 100%;
  /* height: 100%; */
  /* position: absolute; */
  left: 0%;
  transition: left .5s ease;

}

.all_msg
{
  width: 100%;
  /* height: 100%; */
  margin-bottom: 61px;
  box-sizing: border-box;
  overflow-y: scroll;
}


.container_to
{
  left: -30%;
}

.menu1{
  /* margin-top:60px !important */
}

.release_show
{
  width: 100%;
  padding-top: 15px;
  display: flex;
  box-sizing: border-box;
  position: relative;
}

.release_show:after
{
  content: "";
  width: 100%;
  height: 5px;
  background: rgb(247,247,247);
  position: absolute;
  left: 0;
  bottom: 0;
}

.release_left
{
  width: 74px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

.header
{
  width: 50px;
  height: 50px;
  border-radius: 25px;
  object-fit: cover;
}

.release_right
{
  width: calc(100% - 74px);
  padding-right: 12px;
  box-sizing: border-box;
}

.release_right_top
{
  width: 100%;
  height: 50px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.release_right_top_left
{
  display: flex;
  flex-direction: column;
}

.release_name
{
  font-size: 16px;
}

.release_time
{
  margin-top: 2px;
  font-size: 12px;
  color: rgb(216,216,216);
}

.release_contact
{
  width: 54px;
  height: 26px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 12px;
  color:rgb(148,224,167);
  border: 2px solid rgb(88,208,118);
  background: white;
  border-radius: 5px;
}

.release_right_bottom
{
  width: 100%;
}

.release_content
{
  font-size: 14px;
  padding-top: 10px;
}

.release_right_bottom_twef
{
  height: 50px;
  display: flex;
  align-items: center;
}

.release_address_img
{
  width: 15px;
  height: 18px;
  object-fit: contain;
}

.release_address
{
  height: 18px;
  font-size: 12px;
  color:rgb(155,170,205);
  margin-bottom: 2px;
  margin-left: 2px;

}

.mapShow {
  width: 100%;
  position: absolute;
  z-index: 10;
  top: 0;
  height: 100vh;
  overflow: hidden;
  /* left: 100%; */
  /* transition: left .5s ease; */
}

  /* 地图过渡效果 */
  /* .top_mapShow
  {
    left: 30%;

  } */
  .refresh{
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .refresh_btn{
    background: #38B4DB;
    color:#fff;
    padding:10px 80px;
    border-radius: 10px;
    font-size: 20px;
  }




</style>
